<template>
  <div id="app">
    <!-- Header 部分 -->
    <el-header>
      <div class="header-container">
        <el-menu :default-active="activeIndex" class="menu" mode="horizontal">
          <el-menu-item index="1" class="logo" @click="navigateToHome">MBA学习平台</el-menu-item>
          <el-menu-item index="2" @click="navigateToLearning">学习</el-menu-item>
          <el-menu-item index="3">题库</el-menu-item>
          <el-menu-item index="4">竞赛</el-menu-item>
          <el-menu-item index="5">讨论</el-menu-item>
          <el-menu-item index="6">求职</el-menu-item>
          <el-sub-menu index="7">
            <template #title>商店</template>
            <el-menu-item index="7-1">精品商店</el-menu-item>
            <el-menu-item index="7-2">力扣周边</el-menu-item>
            <el-menu-item index="7-3">Plus会员</el-menu-item>
          </el-sub-menu>
        </el-menu>

        <!-- 搜索图标和会员按钮 -->
        <div class="search-and-member">
          <el-button :icon="Search" @click="toggleSearch" class="search-btn">搜索</el-button>
          <el-input v-if="isSearchVisible" placeholder="请输入搜索内容" class="search-input" />
          <el-button plain @click="showLoginDialog = true">登录</el-button>
          <el-button @click="" >plus会员</el-button>
        </div>
      </div>
    </el-header>

    <!-- Main 部分，展示路由视图 -->
    <el-main>
      <router-view></router-view>
    </el-main>

    <!-- Footer 部分 -->
    <el-footer class="end_footer">
      <div class="end_footer-content">© 2025 MBA学习平台 版权所有</div>
    </el-footer>

    <!-- 登录弹出框 -->
    <el-dialog v-model="showLoginDialog" title="登录/注册" width="500" center>
      <el-form :model="form" ref="fromRef">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" type="password" placeholder="请输入密码" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showLoginDialog = false">取消</el-button>
          <el-button type="primary" @click="isRegister ? handleRegister() : handleLogin()">
            {{ isRegister ? '注册' : '登录' }}
          </el-button>
          <el-button @click="toggleRegister">
            {{ isRegister ? '已有账号？登录' : '没有账号？注册' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'

const router = useRouter()
const activeIndex = ref('1')

const showLoginDialog = ref(false)
const isRegister = ref(false)
const formLabelWidth = '140px'

const form = ref({
  username: '',
  password: ''
})

// 登录操作
const handleLogin = () => {
  console.log('登录用户:', form.value)
  showLoginDialog.value = false
}

// 注册操作
const handleRegister = () => {
  console.log('注册用户:', form.value)
  showLoginDialog.value = false
}

// 切换登录与注册状态
const toggleRegister = () => {
  isRegister.value = !isRegister.value
}

// 搜索框控制
const isSearchVisible = ref(false)
const toggleSearch = () => {
  isSearchVisible.value = !isSearchVisible.value
}

// 导航到首页
const navigateToHome = () => {
  activeIndex.value = '1'
  router.push('/')  // 跳转到首页
}

// 导航到学习页面
const navigateToLearning = () => {
  activeIndex.value = '2'
  router.push('/learning')  // 跳转到学习页面
}
</script>

<style scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #8ebdec;
  color: #fff;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  margin-right: 100px;
}

.menu {
  line-height: 60px;
}

.search-and-member {
  display: flex;
  align-items: center;
}

.search-btn {
  margin-right: 20px;
}

.search-input {
  margin-right: 20px;
}

.end_footer {
  text-align: center;
  padding: 10px;
  background-color: #f1f1f1;
}

.end_footer-content {
  color: #333;
}
</style>
